<template>
  <!-- 标题 -->
  <h3>维修信息维护 
    <el-button
          link
          type="primary"
          size="small"
          @click="showDialog(isEdit = flase)"
          >Add</el-button>
    </h3>
  <!-- biaoge -->
  <el-table :data="equipmentList" style="width: 100%" height="250">
    <el-table-column prop="id" label="序号" width="60" />
    <el-table-column prop="equipID" label="设备标签" width="120" />
    <el-table-column prop="equipName" label="设备名称" width="120" />
    <el-table-column fixed="right" label="操作" width="180" >
      <template v-slot="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="showDialog((isEdit = true), scope.row)"
          >Edit</el-button
        >
        <el-button
          link
          type="primary"
          size="small"
          @click="handleDelete(scope.row.id)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 弹出框 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form :model="form">
      <el-form-item label="序号">
        <el-input v-model="form.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="设备ID">
        <el-input v-model="form.eId" autocomplete="off" />
      </el-form-item>
      <el-form-item label="设备名字">
        <el-input v-model="form.eName" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog('cancel')">Cancel</el-button>
        <el-button type="primary" @click="closeDialog('confirm')"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: "",
        eId: "",
        eName: "",
      },
      equipmentList: [{ id: 1, equipID: "E0001", equipName: "切丝机1#" }],
      dialogVisible: false,
      dialogTitle: "",
      isEdit: 0, // 0表示编辑，1表示新增
      
    };
  },
  methods: {
    showDialog(isEdit, row) {
      if (isEdit) {
        this.dialogTitle = "编辑数据";
        this.dialogVisible = true;
        this.form.id = row.id;
        this.form.eId = row.equipID;
        this.form.eName = row.equipName;
      } else {
        this.dialogTitle = "新增数据";
        this.dialogVisible = true;
      }
    },
    closeDialog(operator) {
      // 首先关闭弹出框
      this.dialogVisible = false;
      if (operator == "cancel") {
        // 如果是返回操作
        this.dialogVisible = false;
      } else if (operator == "confirm") {
        // 如果是确认操作
        if (this.isEdit) {
          // 修改数据
          for (let i = 0; i < this.equipmentList.length; i++) {
            if (this.form.id == this.equipmentList[i].id) {
              this.equipmentList[i].equipID = this.form.eId;
              this.equipmentList[i].equipName = this.form.eName;
            }
          }
        } else {
          // 新增数据
          let data = {
            id: this.form.id,
            equipID: this.form.eId,
            equipName: this.form.eName,
          };
          this.equipmentList.push(data);
        }
      }
    },
    handleDelete(id){
        for(let i=0; i<this.equipmentList.length;i++){
            if (this.equipmentList[i].id == id){
                this.equipmentList.pop(this.equipmentList[i])
            }
        }
    }
  },
};
</script>

<style>
</style>